<template>
    <el-card shadow="hover" >
        <div ref="chartRef" :style="{width: props.width, height: props.height}" />
    </el-card>
</template>

<script setup lang="ts">
import { useEcharts } from '@/hooks/useEcharts'

const props = withDefaults(defineProps<{
    width?: string,
    height?: string,
    theme?: string,
    bgColor?: string,
    title: string,
    data: number, 
}>(), {
    width: '100%',
    height: '380px',
    data: 0
})

const option = {
    backgroundColor: props.bgColor,
    title: {
        text: props.title,
        x: 'left'
    },
    series: [
        {
            type: 'gauge',
            center: ['50%', '60%'],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 60,
            splitNumber: 12,
            itemStyle: {
                color: '#FFAB91'
            },
            progress: {
                show: true,
                width: 30
            },
            pointer: {
                show: false
            },
            axisLine: {
                lineStyle: {
                   width: 30
                }
            },
            axisTick: {
                distance: -45,
                length: 5,
                lineStyle: {
                    color: '#999',
                    width: 2
                }
            },
            splitLine: {
                distance: -52,
                length: 14,
                lineStyle: {
                    color: '#999',
                    width: 3
                }
            },
            axisLabel: {
                distance: -20,
                color: '#999',
                fontSize: 20
            },
            anchor: {
                show: false
            },
            title: {
                show: false
            },
            detail: {
                valueAnimation: true,
                width: '60%',
                lineHeight: 40,
                borderRadius: 8,
                offsetCenter: [0, '-15%'],
                fontSize: 60,
                fontWeight: 'bolder',
                formatter: '{value}℃',
                color: 'inherit'
            },
            data: [
                {
                    value: props.data
                }
            ]
        },
        {
            type: 'gauge',
            center: ['50%', '60%'],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 60,
            progress: {
                show: true,
                width: 8,
            },
            data: [
                {
                    value: props.data
                }
            ]
        }
    ]
}

const { chartRef, chart, echartsResizeFun } = useEcharts({props, option})
</script>

<style scoped>

</style>